<style type="text/css">
#sliderDemo span {
	color: red;
	font-weight: bold;
}

#horizontal > div{
	margin: 20px 5px;
}

#vertical > div{
	margin: 20px 5px;
	float: left;
	height : 300px;
	display: block;
	margin: 20px 20px;
}
div.title{
	margin: 20px 0px;
	border: #cccccc 1px solid;
	line-height: 20px;
	padding-left: 5px;
}
	
</style>
<div  class="title" onclick="Ccay.Common.toggle(this,'#horizontal')"> 横向滑块组件</div>
<div id="horizontal">
	op : {min : 0, max: 100, step : 1, value : 0}, 当前值 <span> 0 </span>
	
	<div id="sliderMin"  style="width:300px"></div>
	
	op : {min : 100, max: 200, step : 5, value : 150}, 当前值 <span> 150 </span>
	
	<div id="sliderMax" style="width:400px"></div>
	
	op : {min : 0, max: 100, step : 2, value : 100, range :"min"}, 当前值 <span> 100 </span>
	
	<div id="sliderRangeMin" style="width:500px"></div>
	
	op : {min : 100, max: 200, step :8, value :100, range :"max"}, 当前值 <span> 100 </span>
	
	<div id="sliderRangeMax" style="width:600px"></div>
	
	
	op : {min : 0, max: 100, step : 2, value:50, animate:true, range :"min"}, 当前值 <span> 50 </span>
	
	<div id="sliderAnimateMin" style="width:500px"></div>
	
	op : {min : 100, max: 200, step :10, value:150, animate:true, range :"max"}, 当前值 <span> 150 </span>
	
	<div id="sliderAnimateMax" style="width:400px"></div>
	
	op : {min : 0, max: 200, step :1, values:[50,150]}, 当前值 <span>50 - 150 </span>
	
	<div id="multiHandle" style="width:800px"></div>
	
	op : {min : 0, max: 200, step :1, values:[50,150], animate:true, range :true}, 当前值 <span>50 - 150 </span>
	
	<div id="multiHandleRange" style="width:800px"></div>
</div>

<div  class="title" onclick="Ccay.Common.toggle(this,'#vertical')"> 垂直滑块组件 orientation: "vertical"</div>
<div id="vertical">
	
	
	<div id="verticalAnimateMin" ></div>
	
	<div id="verticalAnimateMax" ></div>
	
	<div id="multiVertical"></div>
	
	<div id="multiVerticalRange" ></div>
</div>


<script type="text/javascript">
<!--
	function slide(data){
		this.dom.prev("span").text(data.values ? data.values.join("-") : data.value);
	}
	$("#sliderMin").slider({min : 0, max: 100, step : 1, value : 0, fnSlide : slide});
	$("#sliderMax").slider({min : 100, max: 200, step : 5, value : 150,fnSlide : slide});
	$("#sliderRangeMin").slider({min : 0, max: 100, step : 2, value : 100, range :"min",fnSlide : slide});
	$("#sliderRangeMax").slider({min : 100, max: 200, step :8, value :100, range :"max",fnSlide : slide});
	$("#sliderAnimateMin").slider({min : 0, max: 100, step : 2, value:50, animate:true, range :"min",fnSlide : slide});
	$("#sliderAnimateMax").slider({min : 100, max: 200, step :10, value:150, animate:true,range :"max",fnSlide : slide});
	$("#multiHandleRange").slider({min : 0, max: 200, step :1, values:[50,150], animate:true, range :true ,fnSlide : slide});
	$("#multiHandle").slider({min : 0, max: 200, step :1, values:[50,150], fnSlide : slide});
	
	$("#verticalAnimateMin").slider({min : 0, max: 100, step : 2, value:50,  range :"min",orientation: "vertical"});
	$("#verticalAnimateMax").slider({min : 100, max: 200, step :10, value:150,range :"max",orientation: "vertical"});
	$("#multiVertical").slider({min : 0, max: 200, step :1, values:[50,150], range :true ,orientation: "vertical"});
	$("#multiVerticalRange").slider({min : 0, max: 200, step :1, values:[50,150],orientation: "vertical"});
	

	
</script>


